<#include "/able/_inc/_head.html"/>
<#include "/able/_inc/_layout.html"/>

<!DOCTYPE HTML>
<!--[if IE 8]><html class="ie8" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie9" lang="en"><![endif]-->
<!--[if !IE]><!-->
<html lang="${lang}">

<head>
    <@head />
</head>
<body>
<@layout>
<div class="wrap-content" id="container">
    <div class="wrap-messages" style="padding-left: 5px;">
        <div id="inbox" class="inbox">
            <!-- start: EMAIL OPTIONS -->
            <div class="col email-options perfect-scrollbar">
                <div class="padding-15">
                    <button class="btn btn-primary btn-block margin-bottom-30">
                        群发组
                    </button>
                    <p class="email-options-title no-margin" style="font-size: 18px;">
                        <span>全部群</span>
                        <span class="pull-right">
                            <a href="#/group/page?projectId=${project.projectId}" class="btn btn-warning btn-xs" >
                                <i class="fa fa-th-large" ></i>
                                管理
                            </a>
                            <a id="btn_addview" class="btn btn-primary btn-xs" >
                                <i class="fa fa-plus" ></i>
                                新增
                            </a>
                        </span>
                    </p>
                    <ul class="main-options padding-15">
                        <#if groups?exists && groups?size gt 0>
                                <#list groups as group>
                                    <li <#if groupId == group.groupId >class="active"</#if> groupId="${groupInfo.groupId}" >
                                        <a href="${ctx_admin}/wx-group?messageId=${messageId}&groupId=${group.id}" >
                                            <span class="title">${group.name}</span>
                                        <#if group.total gt 0>
                                        <span class="badge pull-right">${group.total}</span>
                                        </#if>
                                        </a>
                                    </li>
                                </#list>
                        </#if>
                    </ul>
                </div>
            </div>
            <!-- end: EMAIL OPTIONS -->
            <!-- start: EMAIL LIST -->
            <div class="col email-list">
                <div class="wrap-list">
                    <div class="wrap-options">
                        <div class="messages-options padding-15">
                            <div class="btn-group">
                                <button class="btn btn-primary btn-wide" type="button">
                                    Compose
                                </button>
                                <button class="btn btn-primary dropdown-toggle" type="button">
                                    <span class="caret"></span>
                                </button>
                                <ul role="menu" class="dropdown-menu dropdown-light">
                                    <li>
                                        <a href="#">
                                            <span class="title"><i class="ti-import"></i> Inbox</span>
                                            <span class="badge">10</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span class="title"><i class="ti-upload"></i> Sent</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span class="title"><i class="ti-na"></i> Spam</span>
                                            <span class="badge">1</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span class="title"><i class="ti-star"></i> Starred</span>
                                            <span class="badge">2</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <button class="btn btn-transparent pull-right open-message-search">
                                <i class="ti-search"></i>
                            </button>
                            <button class="btn btn-transparent pull-right close-message-search">
                                <i class="ti-close"></i>
                            </button>
                        </div>
                        <div class="messages-search" style="padding-top: 5px;padding-bottom:1px;">
                            <div class="">
                                <h3 style="margin-bottom:1px;">
                                    <small>
                                        <i class="fa fa-users" style="color: #007AFF"></i> ${group.name}
                                    </small>
                                    <span class="pull-right">
                                                <#if groupInfo?exists>
                                                <a href="#/document?projectId=${project.projectId}&groupId=${groupId}" class="btn btn-warning btn-xs">
                                                    <i class="fa fa-th-large" ></i>
                                                    管理
                                                </a>
                                                </#if>
                                        <a id="btn_follow" data-message_id="${messageId}" data-group_id="${groupId}" class="btn btn-primary btn-xs">
                                                <i class="fa fa-plus" ></i>
                                                新增
                                                </a>
                                    </span>
                                </h3>
                            </div>
                            <#--<form>
                                <input type="text" placeholder="Search messages..." class="form-control underline" style="font-size: 12px;padding: 2px 3px;border: 0px solid #c8c7cc">
                            </form>-->
                        </div>
                    </div>
                    <ul class="messages-list perfect-scrollbar">
                        <#list accountFollows as accountFollow>
                        <li class="messages-item" style="padding: 5px 15px 5px 15px;">
                            <a href="javascript:;" style="display: inline-block;">
                                <#--<span class="messages-item-star" title="Mark as starred"><i class="fa fa-star"></i></span>-->
                                <img class="messages-item-avatar bordered border-primary" style="border: 1px solid #eeeeee;" alt="${accountFollow.nickName}" src="${accountFollow.avatar}">
                                <span class="messages-item-from">${accountFollow.nickName}</span>
                                <div class="messages-item-time">
                                <span class="text"></span>
                                </div>
                                <span class="messages-item-subject"> <#if accountFollow.sex==2>女<#elseif accountFollow.sex==1>男<#else>未知</#if></span>
                                <span class="messages-item-content"></span>
                            </a>
                        </li>
                        </#list>
                    </ul>
                </div>
            </div>
            <!-- end: EMAIL LIST -->
            <!-- start: EMAIL READER -->
            <div class="email-reader perfect-scrollbar">
                <div>
                    <div class="message-actions">
                        <ul class="actions no-margin no-padding block">
                            <li class="email-list-toggle">
                                <a href="#"><i class="fa fa-angle-left"></i> All Inboxes </a>
                            </li>
                            <li class="actions-dropdown">
                                <span class="dropdown">
                                    <a class="dropdown-toggle" href="">
                                        <i class="caret"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-light">
                                        <li>
                                            <a href="javascript:;">
                                                ${model.title}
                                            </a>
                                        </li>
                                    </ul>
                                </span>
                            </li>
                            <li class="no-padding">
                                <a href="javascript:;" class="text-info">
                                    ${model.title}
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="message-header">
                        <button id="btn-send" class="btn btn-primary">发送</button>

                    </div>
                    <#--<div class="message-subject">

                    </div>-->
                    <div class="message-content">
                        ${model.content}
                    </div>
                </div>
            </div>
            <!-- end: EMAIL READER -->
        </div>
    </div>
</div>
</@layout>
<script src="/assets/js/pages-messages.js"></script>

<script type="text/javascript">

    $(function () {
        Messages.init();
        $('#btn_addview').click(function () {
            var url=global.adminPath+'/wx-group/addview';
            layer_show("添加",url,600,400);
        });

        $('#btn_follow').click(function () {
            var url=global.adminPath+'/wx-account/follow/popup?groupId='+$(this).data('group_id');
            layer_show("添加",url,800,600);
        });

        $('#btn-send').click(function () {
            var data={};
            data.groupId = $('#btn_follow').data('group_id');
            data.messageId = $('#btn_follow').data('message_id');
            $.ajax({
                data: data,
                type: 'post',
                dataType: 'json',
                url: global.adminPath + '/wx-message/send',
                success: function (res) {
                    if (res.success) {
                        layer.msg(res.message, {
                            icon: 1,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        }, function () {

                        });
                    } else {
                        layer.msg(res.message, {icon: 2});
                    }
                }
            });
        });
    });
</script>
</body>
</html>